<template>
  <div class="app-container merchantBox">
    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border>
      <el-table-column align="center" label="商家名" width="150">
        <template slot-scope="scope">{{ scope.row.company }}</template>
      </el-table-column>

      <el-table-column label="主营产品" width="700" align="center">
        <template slot-scope="scope">{{ scope.row.scope }}</template>
      </el-table-column>

      <el-table-column label="代理政策" align="center" width="100">
        <template>
          <span>查看</span>
        </template>
      </el-table-column>

      <el-table-column label="申请状态" align="center" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.status == '0' ? '待审核' : scope.row.status == 1 ?'已通过' : '未申请' }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="create_time" label="操作" width="250">
        <template slot-scope="scope">
          <div class="optionAll">
            <el-button size="mini" type="primary" plain>查看VIP旗舰店</el-button>
            <el-button
              class="operation"
              size="mini"
              :type="scope.row.status | statusFilter"
              @click="submitApply(scope.row)"
              plain
            >{{ scope.row.status == '0' ? '待审核' : scope.row.status == 1 ?'已通过' : '申请' }}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      class="pageBox"
      background
      layout="prev, pager, next"
      :total="pageTotal"
      :page-size="20"
      v-if="pageShow"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script>
export default {
    name: "agentCheck",
    components: {},
    filters: {
        statusFilter(status) {
            const statusMap = {
                1: "success",
                0: "info"
            };
            return statusMap[status];
        }
    },
    data() {
        return {
            list: null,
            listLoading: false,
            pageTotal: 0,
            pageShow: false
        };
    },
    created() {},

    methods: {
        // 数据初始化
        defaultFn(currentPage) {
        this.listLoading = true;
        this.$http
            .get("/agent/mill/list", {
            params: {
                token: localStorage.getItem("user_token"),
                agent_id: localStorage.getItem("user_id"),
                pageSize: 20,
                page: currentPage
            }}).then(response => {
                if (response.status == 200) {
                    this.list = response.data.data.list;
                    this.pageTotal = response.data.data.pagination.total;

                    if (this.pageTotal > 20) {
                        this.pageShow = true;
                    } else {
                        this.pageShow = false;
                    }

                    this.listLoading = false;
                } else {
                    this.listLoading = false;
                }
            })
            .catch(error => {
                this.listLoading = false;
            });
        },
        // 触发分页
        handleCurrentChange(val) {
        	this.defaultFn(val);
        },

        submitApply(value){
			if (value.status === 1){
			    return;
            }
			this.$router.push({name: 'agentApply', query:{id: value.id, company: value.company}})
		}
    },

  mounted() {
    this.defaultFn();
  }
};
</script>

<style scoped lang='scss'>
.merchantBox {
  width: 1421px;
  margin: 40px;
  .addUser {
    margin-bottom: 20px;
  }
  .optionAll {
    float: left;
    display: flex;
    justify-content: space-between;
    .operation {
      width: 110px;
    }
  }
}
.pageBox {
  text-align: center;
  margin-top: 30px;
}
</style>
